<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 得到指pid下所有子对象组成的新数组
        // function transListToTreeData(list, rootValue) {
        //     const array = []
        //     list.forEach(item => {
        //         if(item.pid === rootValue){
        //             item.children = transListToTreeData(list, item.id)
        //             array.push(item)
        //         }
        //     });
        //     return array
        // }



        // 递归写
        // function transListToTreeData(list, num) { 
        //     let arr = []
        //    list.forEach(element => {
        //     if(element.pid === num){
        //         element.children = transListToTreeData(list,element.id)
        //         arr.push(element)
        //     }
        //    });
        //    return arr
        // }


        // 数组遍历实现
        // function transListToTreeData(list, num) {
        //     // 第一步找爹
        //     const map = {}
        //     list.forEach(element => {
        //         if (map[element.pid]) {
        //             map[element.pid].push(element)
        //         } else {
        //             map[element.pid] = [element]
        //         }
        //     });
        //     // console.log(map, '第一步结果');

        //     // 第二步找儿子
        //     list.forEach(item =>{
        //         if(map[item.id]){
        //             // 能进来就是有娃的
        //             item.children = map[item.id]
        //         }
        //     })
        //     // console.log(list, '第二步结果');
        //     // 第三步特定爹的儿子留下，其余删除
        //     return list.filter(item => item.pid == num)
        // }


        function transListToTreeData(list, num) {
            // 第一步找爹
            const map = new Map()
            list.forEach(element => {
                if (map.has(element.pid)) {
                    map.get(element.pid).push(element)
                } else {
                    map.set(element.pid,[element]) 
                }
            });
            console.log(map, '第一步结果');

            // 第二步找儿子
            list.forEach(item =>{
                if(map.has(item.id)){
                    // 能进来就是有娃的
                    item.children = map.get(item.id)
                }
            })
            console.log(list, '第二步结果');
            // 第三步特定爹的儿子留下，其余删除
            return list.filter(item => item.pid == num)
        }

        // 测试代码：
        var arr = [
            { id: 1, name: '总裁办', pid: 0 },
            { id: 11, name: '秘书处', pid: 1 },
            { id: 2, name: 'IT部', pid: 0 }
        ]

        // 数组遍历测试
        transListToTreeData(arr, 0)
        console.log(  transListToTreeData(arr, 0), '第三步结果');








        // 递归测试代码
       /*  var result = transListToTreeData(arr, 11)
        console.log(result); // []

        result = transListToTreeData(arr, 1)
        console.log(result); // [{ id: 11, name: '秘书处', pid: 1, children: [] }]

        result = transListToTreeData(arr, 0)
        console.log(result) */;
        // [
        //     { id: 1, name: '总裁办', pid: 0, children: [{ id: 11, name: '秘书处', pid: 1 }] },
        //     { id: 2, name: 'IT部', pid: 0 }
        // ]
    </script>
</body>

</html>